@import "../_mixins.less";

@choices: "../../../node_modules/choices.js/public/assets/styles";
@import (less) "@{choices}/choices.css";


:host {
  // TODO: remove alpha value if not necessary
  --light: rgba(0,126,255,.08);
  --light-border: rgba(0,126,255,.24);
  --light-text: #007eff;

  --solid: #1f77b4;
}

.choices {
  width: 100%
}

.choices {
  box-sizing: border-box;

  *, *:before, *:after {
    box-sizing: inherit;
  }
}

input[type="search"] {
  margin: 0;
}

.choices__inner .choices__item.light {
  background-color: var(--light);
  border-radius: var(--border-radius);
  border: var(--border-width) var(--border-style) var(--light-border);
  color: var(--light-text);
}

.choices__inner .choices__item.solid {
  background-color: var(--solid);
  border: none;
  border-radius: var(--border-radius);
  color: white;
  .is-highlighted {
    background-color: var(--solid);
    border: none;
  }
}

.choices__input {
  background-color: transparent;
}

.choices__inner {
  background: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  min-height: 0;
  padding: calc(var(--padding-vertical) / 2) var(--padding-horizontal);
}

.choices__list {
  white-space: initial;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  z-index: var(--bokeh-top-level);

  & .choices__item--selectable {
    padding-right: 0;
  }
}

.choices[data-type*=select-multiple] .choices__button.light {
  background-image: url();
}

.choices[data-type*=select-multiple] .choices__button.solid {
  background-image: url();
  border-left: var(--divider-width) solid var(--inverted-color);
  opacity: 1;
}
